<template>
  <span style="padding-left:10px">
    <el-button :size="size" plain :type="type" @click="stopRole">
      <fa-icon v-show="icon" class="fa-stop-circle" />{{title}}</el-button>
    <el-dialog title="停用职务" :visible.sync="roleDialog" append-to-body width="24%" :close-on-click-modal="false">
      <stop-or-open-role v-if="roleDialog" :roleData="roleData" @uppdataSuccess="updataData" @close="roleDialog = false" />
    </el-dialog>
  </span>
</template>

<script>
import StopOrOpenRole from './StopOrOpenRole'
export default {
  components: { StopOrOpenRole },
  props: {
    roleData: Object,
    title: String,
    icon: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: 'small'
    },
    type: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      roleDialog: false
    }
  },
  methods: {
    stopRole () {
      this.roleDialog = true
    },
    updataData () {
      this.roleDialog = false
      this.$emit('uppdataSuccess', 'role')
    }
  }
}
</script>
